//职员管理

import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Button, Table, Modal, Row, Col, Upload, Icon, DatePicker, Select, Cascader} from 'antd';
import {project, china, shop} from '../value';
import '../css/other.css';
import moment from 'moment';
import {config} from "../config";
import {ChooseGoods} from '../components/operateManage';
import {EditorState} from "draft-js";
import {PictureUpload} from "../components/pictureUpload";


const FormItem = Form.Item;
const confirm = Modal.confirm;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;
const TextArea = Input.TextArea;

class StoreSetup extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodList: [],
            allNumber: 0,
            imgUrl: '',
            pictureList: [],
            pictureList1: [],
            intelligence: [],
            intelligence1: [],
            optionsList: [],
            address: []
        }
    }

    formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 12},
    };
    columns = [
        {
            title: '序号',
            dataIndex: 'order_number'
        },
        {
            title: '图片',
            dataIndex: 'img',
            render: picture => {
                return (
                    <img className={"projectImg"} src={config.imgServerUrl + picture}/>
                )
            }
        },
        {
            title: '商品名',
            dataIndex: 'name'
        },
        {
            title: '操作',
            dataIndex: this.columns,
            render: data => {
                return (
                    <Button style={{marginLeft: '10px'}} type="danger"
                            onClick={() => this.handleDeleteGood(data.order_number)}>删除</Button>
                )
            }
        },
    ];

    render() {
        const {getFieldDecorator} = this.props.form;
        const {allNumber, intelligence, intelligence1, optionsList} = this.state;

        function onChange(value, selectedOptions) {
            console.log(value, selectedOptions);
        }

        function filter(inputValue, path) {
            return (path.some(option => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1));
        }

        return (
            <div style={{paddingBottom: 25}}>
                <div className="pageTitle">
                    店铺设置/基本信息设置
                </div>
                <Row style={{marginTop: 20}}>
                    <FormItem label={"店铺头像"} style={{display: 'flex'}} {...this.formItemLayout}>
                        {getFieldDecorator('avatarImg')(
                            <PictureUpload pictureList={this.state.pictureList} len={1}
                                           pictureList1={this.state.pictureList1}
                                           getPictureList={(data, data1) => this.handleGetPictureList(data, data1)}></PictureUpload>
                        )}
                    </FormItem>
                    <FormItem label={"商家名称"} style={{display: 'flex'}} {...this.formItemLayout}>
                        {getFieldDecorator('shop_name', {
                            rules: [{required: true, message: '请输入商家名称'}],
                        })(
                            <Input
                                placeholder="请输入商家名称" style={{width: '300px'}}/>
                        )}
                    </FormItem>
                    <FormItem label={"商家电话"} style={{display: 'flex'}} {...this.formItemLayout}>
                        {getFieldDecorator('shop_phone', {
                            rules: [{required: true, message: '请输入商家电话'}],
                        })(
                            <Input
                                placeholder="请输入商家电话" style={{width: '300px'}}/>
                        )}
                    </FormItem>
                    <FormItem label={"店铺地址"} style={{display: 'flex'}} {...this.formItemLayout}>
                        {getFieldDecorator('shop_location', {
                            rules: [{required: true, message: '请输入店铺地址'}],
                        })(
                            <Cascader
                                options={optionsList}
                                onChange={onChange}
                                placeholder="请选择地址"
                                showSearch={{filter}}
                                style={{width: '300px'}}
                            />
                        )}
                    </FormItem>
                    <FormItem label={"详细地址"} style={{display: 'flex'}} {...this.formItemLayout}>
                        {getFieldDecorator('shop_address', {
                            rules: [{required: true, message: '请输入详细地址'}],
                        })(
                            <Input
                                placeholder="请输入详细地址" style={{width: '300px'}}/>
                        )}
                    </FormItem>
                    <FormItem label={"店铺资质"} style={{display: 'flex'}} {...this.formItemLayout}>
                        {getFieldDecorator('zizhi')(
                            <PictureUpload pictureList={this.state.intelligence} len={1}
                                           pictureList1={this.state.intelligence1}
                                           getPictureList={(data, data1) => this.handleGetIntelligenceList(data, data1)}></PictureUpload>
                        )}
                    </FormItem>
                    <FormItem label={"商家简介"} style={{display: 'flex'}} {...this.formItemLayout}>
                        {getFieldDecorator('shop_explain')(
                            <TextArea
                                placeholder="请输入商家简介" style={{width: '300px'}}/>
                        )}
                    </FormItem>
                    <FormItem label={"店铺公告"} style={{display: 'flex'}} {...this.formItemLayout}>
                        {getFieldDecorator('shop_notice')(
                            <TextArea
                                placeholder="请输入店铺公告" style={{width: '300px'}}/>
                        )}
                    </FormItem>
                    <Row style={{textAlign: 'center', marginTop: 20}}>
                        <Col span={8} offset={6}>
                            <Button type={'primary'} onClick={(e) => this.handleSubmit(e)}>保存</Button>
                        </Col>
                    </Row>
                </Row>
            </div>
        )
    }

    /**
     * 初始化
     */
    componentDidMount() {
        this.handleGetAddress();
        this.searchShop();
    }


    /**
     * 查找店铺信息
     * @param param
     */
    searchShop() {
        let _this = this;
        _this.setState({loading: true});
        app.post(shop.SEARCH_SHOP, {}).then(result => {
            if (result.code === 1) {
                let {shop_name, shop_phone, shop_province, shop_city, shop_area, shop_address, shop_explain, shop_notice, fileList} = result.data;
                let address = [];
                if (shop_province && shop_province.length > 0) {
                    address.push(shop_province);
                    address.push(shop_city);
                    address.push(shop_area);
                }
                let data = [];
                data['shop_name'] = {value: shop_name};
                data['shop_phone'] = {value: shop_phone};
                data['shop_address'] = {value: shop_address};
                data['shop_explain'] = {value: shop_explain};
                data['shop_notice'] = {value: shop_notice};
                data['shop_location'] = {value: address};
                _this.props.form.setFields(data);
                let pictureList1 = [], pictureList2 = [], pictureList3 = [], pictureList4 = [];
                if (fileList && fileList.length > 0) {
                    for (let i = 0; i < fileList.length; i++) {
                        let item = fileList[i];
                        if (item.file_type === '2') {
                            pictureList1.push(item.file_path);
                            pictureList2.push(item);
                        } else {
                            pictureList3.push(item.file_path);
                            pictureList4.push(item);
                        }
                    }
                }
                this.setState({
                    pictureList: pictureList1,
                    pictureList1: pictureList2,
                    intelligence: pictureList3,
                    intelligence1: pictureList4
                });
            } else {
                app.alert(result.msg, 'info', 1);
            }
        });
    }

    /**
     * 查看所有省市区
     */
    handleGetAddress() {
        const _this = this;
        app.post(china.SEARCH_ADDRESS_LIST, {}).then((res) => {
            _this.setState({optionsList: _this.handleGetAddressNewList(res.data)});
        })
    }


    /**
     * 递归处理省市区数据
     * @param data
     * @returns {*}
     */
    handleGetAddressNewList(data) {
        for (let i = 0; i < data.length; i++) {
            data[i].value = data[i].name;
            data[i].label = data[i].name;
            if (data[i].sub && data[i].sub.length > 0) {
                data[i].children = this.handleGetAddressNewList(data[i].sub);
            }
        }
        return data;
    }


    /**
     * 处理选择商品事件
     * @param data
     */
    handleChoose(data) {
        for (let i = 0; i < data.length; i++) {
            data[i].order_number = i + 1;
        }
        this.setState({goodList: data, allNumber: data.length});
    }

    /**
     * 删除商品
     * @param index
     */
    handleDeleteGood(index) {
        let goodList = this.state.goodList;
        goodList.splice(index - 1, 1);
        for (let i = 0; i < goodList.length; i++) {
            goodList[i].order_number = i + 1;
        }
        this.setState({goodList});
    }

    /**
     * 处理提交事件
     * @param e
     */
    handleSubmit(e) {
        e.preventDefault();
        let _this = this;
        let {pictureList1, intelligence1} = this.state;
        if (pictureList1.length <= 0) {
            app.alert('请上传店铺头像', 'info', 1);
            return;
        }
        if (intelligence1.length <= 0) {
            app.alert('请上传店铺资质图片', 'info', 1);
            return;
        }
        let fileList = [];
        for (let i = 0; i < pictureList1.length; i++) {
            let item = pictureList1[i];
            item.file_type = '2';
            fileList.push(item);
        }
        for (let i = 0; i < intelligence1.length; i++) {
            let item = intelligence1[i];
            item.file_type = '3';
            fileList.push(item);
        }
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log(values);
                let shop_location = values.shop_location;
                values.shop_province = shop_location[0];
                values.shop_city = shop_location[1];
                values.shop_area = shop_location[2];
                values.fileList = fileList;
                app.post(shop.ADD_UPDATE_SHOP_BASIC, values).then((req) => {
                    if (req.code == 1) {
                        app.alert("保存成功", 'success', 1);
                        _this.setState({
                            visible: false
                        });
                    } else {
                        app.alert(req.msg, 'info', 1);
                    }
                })
            }
        })
    }

    /**
     * 获取头像图片
     * @param pictureList
     */
    handleGetPictureList(pictureList, pictureList1) {
        this.setState({pictureList, pictureList1});
    }

    /**
     * 获取店铺资质图片
     * @param intelligence
     * @param intelligence1
     */
    handleGetIntelligenceList(intelligence, intelligence1) {
        this.setState({intelligence, intelligence1});
    }

}

const StoreSetups = Form.create()(StoreSetup);

export default StoreSetups


